<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>保险</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				padding-top: 4px;
				background-color: aliceblue;
				display: flex;
				justify-content: space-around;
			}
		
			.bottom .bottom-item {
				text-align: center;
				font-size: 14px;
		
			}
		
			.active {
				color: rgb(72, 122, 250);
			}
		
			.bottom img {
				width: 20px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="bottom">
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">首页</div>
			</div>
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">保险</div>
			</div>
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">礼遇</div>
			</div>
			<div class="bottom-item">
				<img src="./images/qq.png" alt="" srcset="" />
				<div class="text">我的</div>
			</div>
		</div>
		<script>
			const queryString = window.location.search;
			console.log("queryString", queryString);
			let initIndex = 1;
			const btns = document.querySelectorAll('.bottom-item');
			btns.forEach((btn, index) => {
				if(index == initIndex)
				btn.className += ' active'
			});
			
			// 底部事件
			function fnBottom() {
				const btns = document.querySelectorAll('.bottom-item'); 
				btns.forEach((btn, index) => {
					btn.addEventListener('click', (event) => {
						btns.forEach(item => item.classList.remove('active'));
						event.currentTarget.classList.add('active');
						// console.log(index); 
						if(index== 0){
							window.location.href = `home.html`
						}else if(index ==1){
							window.location.href = `insurance.html`
						}else if(index ==2){
							window.location.href = `gift.html`
						}else if(index ==3){
							window.location.href = `mine.html`
						}
					});
				});
			}
			fnBottom()
		</script>
	</body>
</html>